<template>
  <a-modal class="common-modal" :title="$t('other.modifiedShelving')" :footer="null" :width="800" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" :rules="editPutawayRule" ref="formRef" layout="horizontal" class="common-modal-content" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('hangManage.scheduledNo')" name="orderNo">
              <a-input v-model:value.trim="formState.orderNo" disabled :placeholder="$t('common.systemAutoGenerate')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('other.planCompleteTime')" name="produceOnlineTime">
              <a-date-picker v-model:value="formState.produceOnlineTime" :placeholder="$t('common.pleaseSelect')" value-format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('basicData.color')" name="colorCode">
              <a-select v-model:value="formState.colorCode" :placeholder="$t('common.pleaseSelect')">
                <a-select-option v-for="item in colorList" :key="item.key" :value="item.code">{{item.nameCodeValue}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('basicData.size')" name="sizeCode">
              <a-select v-model:value="formState.sizeCode" :placeholder="$t('common.pleaseSelect') ">
                <a-select-option v-for="item in sizeList" :key="item.key" :value="item.code">{{item.nameCodeValue}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('hangManage.poNo')" name="poNo">
              <a-input v-model:value.trim="formState.poNo" :placeholder="$t('common.pleaseInput')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('hangManage.bedNo')" name="cutterNo">
              <a-input v-model:value.trim="formState.cutterNo" :placeholder="$t('common.pleaseInput')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('hangManage.cut')" name="tailorBill">
              <a-input v-model:value.trim="formState.tailorBill" :placeholder="$t('common.pleaseInput')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('hangManage.taskNumber')" name="quantity">
              <a-input-number :placeholder="$t('common.pleaseInput')" v-model:value="formState.quantity" min="1" allowClear />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { uniqBy } from 'lodash'
import { getFieldText } from '@/utils'
import axios from '@/utils/request'
import { message } from 'ant-design-vue'
import { editPutawayRule } from './prodTimeConfig'
import i18n from '@/locales/index'

const { t } = i18n.global
const emits = defineEmits(['ok'])
const labelCol = { xs: { span: 24 }, sm: { span: 6 } }
const wrapperCol = { xs: { span: 24 }, sm: { span: 16 } }
let visible = ref(false)
let confirmLoading = ref(false)
let recordInfo = ref({})
let formState = ref({})
let formRef = ref()
let colorList = ref([])
let sizeList = ref([])
let usedColorAry = ref([])
let usedSizeAry = ref([])
let styleColorList = ref([])
let styleSizeList = ref([])
let operateInfo = ref({})
let prodSchedule = ref({})
const open = async (record, optInfo) => {
  operateInfo.value = optInfo
  prodSchedule.value = record
  await getDetailInfo({ id: record.moId })
  visible.value = true
  formState.value = {
    colorCode: record.colorCode,
    sizeCode: record.sizeCode
  }
}
const initSizeColor = () => {
  colorList.value = uniqBy((styleColorList.value).concat(usedColorAry.value), 'code')
  sizeList.value = uniqBy((styleSizeList.value).concat(usedSizeAry.value), 'code')
}
const getDetailInfo = async (params) => {
  const res = await axios.getAction('/api/mo/mo/get', params)
  if (res.success) {
    recordInfo.value = res.data
    usedColorAry.value = res.data.moDetailColorVOList
    usedSizeAry.value = res.data.moDetailSizeVOList
    await getStyleInfo(res.data.styleId)
    initSizeColor()
  } else {
    recordInfo.value = {}
    usedColorAry.value = []
    usedSizeAry.value = []
    colorList.value = []
    sizeList.value = []
  }
}
const getStyleInfo = async (id) => {
  const res = await axios.getAction('/api/basic/style/get', { id })
  if (res.success) {
    styleColorList.value = res.data.styleColorList.map(i => { return { name: i.color, code: i.colorCode, nameCodeValue: `${i.color}-${i.colorCode}` } })
    styleSizeList.value = res.data.styleSizeList.map(i => { return { name: i.size, code: i.sizeCode, nameCodeValue: `${i.size}-${i.sizeCode}` } })
  } else {
    styleColorList.value = []
    styleSizeList.value = []
  }
}
const getParams = () => {
  let params = { ...formState.value }
  params.color = getFieldText(colorList.value, params.colorCode, 'code', 'name')
  params.size = getFieldText(sizeList.value, params.sizeCode, 'code', 'name')
  params.moId = operateInfo.value.moId
  params.stationId = operateInfo.value.stationId
  params.hangerLineId = operateInfo.value.hangerLineId
  params.roadMapId = operateInfo.value.roadmapId
  params.sourceScheduleBillId = prodSchedule.value.id
  return params
}
const handleOk = async () => {
  try {
    await formRef.value.validateFields();
    let params = getParams()
    confirmLoading.value = true
    let res = await axios.postAction('/api/hanger/hangerline-realtime/change-putaway-by-shcedulebill', params)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg || t('common.doSuccess'))
      emits('ok')
      handleCancel()
    }
  } catch {
    confirmLoading.value = false
    console.log('err')
  }
}
const handleCancel = () => {
  visible.value = false
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
}

defineExpose({
  open
})
</script>
